<script setup lang="ts">
import { onBeforeMount, ref, reactive, toRaw, onMounted } from 'vue';
import { getProblemList, Problem, ProblemEasy } from '@/api/problem';
import { useRouter } from 'vue-router';
import ProblemTag from '@/components/Problem/ProblemTag.vue';
import ProblemDifficult from '@/components/Problem/ProblemDifficult.vue';


const currentPage = ref(1);
const nextPageUrl = ref('');
const prevPageUrl = ref('');
const isLoading = ref(false);


const router = useRouter();
onBeforeMount(async () => {
  await fetchProblemList(currentPage.value);
});
const list = ref([]);
const fetchProblemList = async (page: number) => {
  isLoading.value = true;
  try {
    const res: { results: [], next: string, previous: string } = await getProblemList(page);
    console.log(res);
    nextPageUrl.value = res.next;
    prevPageUrl.value = res.previous;
    currentPage.value = page;
    isLoading.value = false;
    list.value = res.results;
  } catch (error) {
    console.error('Error fetching problem list:', error);
    isLoading.value = false;
  }
};

function goToPreviousPage() {
  const newPage = currentPage.value - 1;
  router.push(`/problem?page=${newPage}`);
  fetchProblemList(newPage);
}

function goToNextPage() {
  const newPage = currentPage.value + 1;
  router.push(`/problem?page=${newPage}`);
  fetchProblemList(newPage);
}


const difficultyText = ['简单', '中等', '困难'];
const columns = [
  {
    title: '题目',
    dataIndex: 'id',
    key: 'id',
    sorter: {
      compare: (a: any, b: any) => (a.id || 0) - (b.id || 0),
    },
  },
  {
    title: '题目标签',
    dataIndex: 'tags',
    key: 'tags',
    align: 'center',
  },
  {
    title: '难度',
    dataIndex: 'rating',
    key: 'rating',
    align: 'center',
    sorter: {
      compare: (a: any, b: any) => (a.rating || 0) - (b.rating || 0),
    },
  },
  {
    title: '提交人数',
    dataIndex: 'totalSubmit',
    key: 'totalSubmit',
    align: 'center',
  },
  {
    title: '通过人数',
    dataIndex: 'totalAccept',
    key: 'totalAccept',
    align: 'center',
  },
];
const jumpToProblemPage = (problemId: number) => {
  window.open(`/problem/${problemId}`, '_blank');
};
const handleTitleClick = (e: PointerEvent, item: Problem) => {
  jumpToProblemPage(item.id);
};


const cssStr = (error = 0, total: number) => {
  const percent = 100 * (total - error) / total || 1; // 等于0时随便传一个非零值，否则样式不展示
  return 'background: linear-gradient(\n' +
      '                  to right,\n' +
      `                  rgba(225, 248, 227) ${percent}%,\n` +
      `                  rgba(255, 245, 245) ${percent}%,\n` +
      '                  rgba(255, 245, 245) 100%,\n' +
      '                  rgba(0, 0, 0, 0) 100%\n' +
      '                );';
};
</script>

<template>
  <a-row justify="center">
    <a-col :xs="23" :sm="23" :md="20" :lg="18" :xl="18">
      <h1 v-show="!isLoading" class="title">Problems</h1>
      <div v-if="isLoading" class="loading-overlay">
        <a-spin size="large"/>
      </div>
      <transition name="list-fade">
        <a-table :columns="columns" :data-source="list" row-class-name="problem-list-item" :pagination="false">
          <template #bodyCell="{ column, record }">
            <template v-if="column.key === 'id'">
              <a-button type="link" @click="(e) => handleTitleClick(e, toRaw(record))">
                {{ record.remote_oj + record.remote_id + ' . ' + record.title }}
              </a-button>
            </template>
            <template v-if="column.key === 'tags'">
              <template v-for="(tag, index) in record.tags" :key="index">
                <problem-tag :tag=tag></problem-tag>
              </template>
            </template>
            <template v-else-if="column.key === 'rating'">
              <ProblemDifficult :tag="{ difficult: record.rating }"/>
            </template>
            <template v-else-if="column.key === 'totalSubmit'">
              <span>
                {{ record.total_submitted || 0 }}
              </span>
            </template>
            <template v-else-if="column.key === 'totalAccept'">
              <span>
                {{ record.total_accepted || 0 }}
              </span>
            </template>
          </template>
        </a-table>
      </transition>
      <div class="pagination">
        <a-button v-show="!isLoading" :disabled="!prevPageUrl" @click="goToPreviousPage">上一页</a-button>
        <a-button v-show="!isLoading" :disabled="!nextPageUrl" @click="goToNextPage">下一页</a-button>
      </div>
    </a-col>
  </a-row>
</template>

<style scoped lang="less">
.title {
  font-size: 30px;
  margin: 16px 0;
}

.problem-list-item {
  .submitStatus {
    height: 100%;
    line-height: 50px;
  }
}

.pagination {
  display: flex;
  justify-content: center;
  margin-top: 16px;
}


.loading-overlay {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background-color: rgba(255, 255, 255, 0.7);
  z-index: 1;
  display: flex;
  justify-content: center;
  align-items: center;
}

</style>
<style>
.problem-list-item .ant-table-cell {
  padding: 0;
  height: 50px;
}
</style>
